<template>
  <div>
    <el-dialog
      :visible.sync="showPointDialog"
      :before-close="check"
      title="多集打包策略配置"
      width="90%"
    >
      <el-card class="box-card">
        <!-- <div slot="header">
          <span class="bold"></span>
        </div> -->
        <el-row>
          <el-col :span="12">
            <div class="">
              服务名称：{{ packagenames }}
            </div>
          </el-col>
          <el-col :span="12">
            <div class="">
              服务ID：{{ packageIds }}
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card1">
        <el-row>
          <el-col>
            <div class="required">
              是否全集收费：
              <el-switch
                v-model="value1"
                active-text="是"
                inactive-text="否"
              />
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-card v-show="!value1" class="box-card1 package">
        <el-row>
          <el-col :span="8">
            <div class="watch required">
              头部免费集数：
              <el-input-number
                v-model="headNum"
                :min="0"
                size="medium"
                @change="handleChange"
              />
            </div>
          </el-col>
          <el-col :span="8" style="margin-top: 8px;">
            <div class="watch required">
              是否伴随更新更多集数增长：
              <el-switch
                v-model="value2"
                active-text="是"
                inactive-text="否"
              />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="watch">
              <el-alert
                title="集数为0代表不启用该配置"
                ttype="info"
                show-icon
                :closable="false"
              />
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="watch required">
              腰部VIP集数：
              <el-input-number
                v-model="headNum1"
                :min="0"
                size="medium"
                @change="handleChange"
              />
            </div>
          </el-col>
          <el-col :span="8" style="margin-top: 8px;">
            <div class="watch required">
              是否伴随更新更多集数增长：
              <el-switch
                v-model="value3"
                active-text="是"
                inactive-text="否"
              />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="watch">
              <el-alert
                title="VIP会员指订购了指定产品的用户"
                ttype="info"
                show-icon
                :closable="false"
              />
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="watch required">
              尾部超前点映集数：
              <el-input-number
                v-model="headNum2"
                :min="0"
                size="medium"
                @change="handleChange"
              />
            </div>
          </el-col>
          <el-col :span="8" style="margin-top: 8px;">
            <div class="watch required">
              是否伴随更新更多集数增长：
              <el-switch
                v-model="value4"
                active-text="是"
                inactive-text="否"
              />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="watch">
              <el-alert
                title="超前点映指将子集关联进指定超前点映产品中，面向VIP用户以单集收费形式售卖"
                ttype="info"
                show-icon
                :closable="false"
              />
            </div>
          </el-col>
          <el-col :span="24">
            <div class="watch required">
              集数不足时排列优先级：
              <div class="order">
                <el-input
                  v-model="arr[0].name"
                  size="medium"
                  disabled
                  style="width: 120px"
                />
                <i class="el-icon-arrow-right" />
                <el-input
                  v-model="arr[1].name"
                  disabled
                  size="medium"
                  style="width: 120px"
                />
                <i class="el-icon-arrow-right" />
                <el-input
                  v-model="arr[2].name"
                  disabled
                  style="width: 120px"
                  size="medium"
                />
                <el-button
                  type="primary"
                  size="medium"
                  style="margin-left:15px;"
                  round
                  plain
                  @click="setting"
                >
                  配置优先级
                </el-button>
              </div>
            </div>
          </el-col>
          <el-col>
            <div class="watch required">
              剧集完结后，逐步将超前点映子集变更为VIP子集的每日变更集数：
              <el-input-number
                v-model="headNum5"
                :min="0"
                size="medium"
                @change="handleChange"
              />
            </div>
          </el-col>
        </el-row>
      </el-card>
      <div slot="footer" class="dialog-footer" style="display: flex;justify-content: center;">
        <el-button size="medium" style="margin-right: 20px;" @click="check">取 消</el-button>
        <el-button size="medium" type="primary" @click="check">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="配置优先级"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div class="package">
        <el-alert
          title="上线集数不足时，将按照下面优先级定义已有子集的打包策略"
          ttype="info"
          show-icon
          :closable="false"
        />
        <el-card v-for="(item, index) in arr" :key="index" style="margin-top: 20px;">
          <div class="huge">
            <div class="hugeitem">
              <div class="hugenum">{{ parseInt(index) + 1 }}</div>
              <div class="hugeblock">
                <span>{{ item.name }}</span>
                <div class="arrow">
                  <svg-icon v-show="index !== 0" class="iconFont" icon-class="uparrow" @click="upOrder(index)" />
                  <svg-icon v-show="index !== arr.length - 1" class="iconFont" icon-class="downarrow" @click="downOrder(index)" />
                </div>
              </div>
            </div>
          </div>
        </el-card>
        <div slot="footer" class="dialog-footer" style="margin-top: 20px;display: flex;justify-content: space-evenly;">
          <el-button size="medium" @click="dialogVisible = false">取 消</el-button>
          <el-button size="medium" type="primary" @click="dialogVisible = false">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    packageDialog: {
      type: Boolean,
      default: false
    },
    packageId: {
      type: String,
      default: ''
    },
    packageName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showPointDialog: false, // 遮罩
      arr: [{
        name: 'vip集数'
      }, {
        name: '免费集数'
      }, {
        name: '超前点映集数'
      }],
      dialogVisible: false,
      order1: '',
      order2: '',
      order3: '',
      serviceId: '', // id
      createTime: '', // 创建日期
      name: '', // 名称
      serviceType: '', // 服务类型
      type: '', // 服务类型
      description: '', // 描述
      packagenames: '',
      value1: false,
      value2: true,
      value3: true,
      value4: true,
      headNum: 0,
      headNum1: 4,
      headNum2: 2,
      headNum5: 2,
      packageIds: ''
    }
  },
  watch: {
    packageDialog(newVal) {
      this.showPointDialog = newVal
      this.packageIds = this.packageId
      this.packagenames = this.packageName
    },
    value1(newVal) {
      console.log(newVal)
    }
  },
  methods: {
    handleChange(e) {
      console.log(e)
    },
    upOrder(index) {
      const indexItem = parseInt(index)
      if (indexItem !== 0) {
        this.arr.forEach((item, num) => {
          if (parseInt(num) === indexItem) {
            var beforeName = item.name
            // item.index = this.arr[num - 1].index
            item.name = this.arr[num - 1].name
            this.arr[num - 1].name = beforeName
            // this.arr[num - 1].index = beforeIndex
          }
        })
      }
    },
    downOrder(index) {
      const indexItem = parseInt(index)
      if (indexItem !== this.arr.length - 1) {
        this.arr.forEach((item, num) => {
          if (parseInt(num) === indexItem) {
            var beforeName = item.name
            // item.index = this.arr[num - 1].index
            item.name = this.arr[num + 1].name
            this.arr[num + 1].name = beforeName
            // this.arr[num - 1].index = beforeIndex
          }
        })
      }
    },
    setting() {
      this.dialogVisible = true
    },
    handleClose() {

    },
    // 回调父组件
    check() {
      this.showPointDialog = false
      this.$emit('closePackage')
    }
  }
}
</script>

<style scoped>
.huge{
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.hugeitem{
  width: 100%;
  display: flex;
  justify-content: space-around;
  line-height: 100px;
}
.hugeblock{
  display: flex;
  width: 123px;
  justify-content: space-around;
}
.iconFont{
  font-size: 24px;
  cursor: pointer;
}
.arrow{
  display: flex;
  width: 25px;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}
.box-card{
  margin-top: -25px;
}
.box-card1{
  margin-top: 10px;
}
.hugenum {
  font-weight: bold;
  font-size: 25px;
  color:#409eff;
}
.box-card2{
  margin-top: 10px;
}
.watch{
  margin: 10px 0;
}
.bold{
  font-weight: bold;
}
.el-card__header{
  padding: 9px 20px !important;
}
.required::before{
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
.el-button.is-circle{
  padding: 5px !important;
}
.btnall{
  margin: 17px auto -12px auto;
  width: 230px;
}
.order {
  display: inline-block;
}
</style>
<style>
.package .el-alert--info {
  background-color: #409eff30 !important;
  color: #409eff !important;
}
</style>
